<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市下钻</title>
    <script src="jquery.js"></script>
    <script type="text/javascript" src="echarts-all-3.js"></script>
</head>
<body>
<div id="maps" style="width: 800px; height: 800px"></div>
<script>
    var dom = document.getElementById("maps");
    var myChart = echarts.init(dom);
    function init_option(name) {
        return  {
            backgroundColor: '#404a59',
            title: {
                text: name=='china'?"全国":provincesText[currentIdx],
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'map',
                    mapType: name,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#389BB7',
                            areaColor: '#fff'
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                }
            ]
        }
    }
    myChart.on('click', function (param) {
        //param.dataIndex  台湾是0 河北是1...香港32  澳门33  排序和下面完全相同 南海诸岛是-1 无param.name
        var dataIndex=param.dataIndex;
        dataIndex<34&&dataIndex>-1?currentIdx=param.dataIndex:"";
        showProvince() ;
    });
    var provinces = ['taiwan','hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'shanghai','chongqing', 'xianggang', 'aomen'];
    var provincesText = ['台湾','河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '上海','重庆', '香港', '澳门'];
    function showProvince() {
        var name = currentIdx==100?'china':provinces[currentIdx];  //100时为全国，不然取省
         myChart.showLoading();
        $.get('province/' + name + '.json', function (geoJson) {
             myChart.hideLoading();
            echarts.registerMap(name, geoJson);
            myChart.setOption(
                option = init_option(name)
            );
        });
    }
    var currentIdx = 100;
    option = {
        series: []
    };
    showProvince();
</script>
</body>
</html>